<template>
  <wit-content>
    <wit-custom :isBack="true">
      <template v-slot:content>主题设置</template>
      <template v-slot:left>
        <text class="icon-banben font-size-xl"></text>
      </template>
      <template v-slot:right>
        <text class="icon-banben font-size-xl"></text>
      </template>
    </wit-custom>
    <view class="content">
      <wit-color-picker ref="colorPicker" :color="color" @confirm="confirm"></wit-color-picker>
      <view class="padding-xs icon-biaoshi font-size-df margin-bottom-sm">顶部导航栏</view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['custom','color'])">
        <view class="basis-sm">导航栏字体颜色</view>
        <view class="color-value border-solid-xs" :style="'background:'+themes.custom.color"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['custom','leftColor'])">
        <view class="basis-sm">导航栏左边图标颜色</view>
        <view class="color-value border-solid-xs" :style="'background:'+themes.custom.leftColor"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['custom','rightColor'])">
        <view class="basis-sm">导航栏右边图标颜色</view>
        <view class="color-value border-solid-xs" :style="'background:'+themes.custom.rightColor"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['custom','background'])">
        <view class="basis-sm">
          <label class="margin-right-sm">导航栏背景颜色</label>
          <radio-group @click.stop @change="themeSelect = ['custom', 'background']" class="margin-top-df" v-show="themes.config.linearGradientStatus" style="display: unset">
            <radio :value="themes.bar.mode" :checked="(themeSelect[0]?themeSelect[0]:'custom')==='custom'" />
          </radio-group>
        </view>
        <view v-show="themes.config.linearGradientStatus" @click.stop="open(['custom','backgroundOne'], 'one')" class="color-value border-solid-xs text-center" :style="'background:'+themes.custom.backgroundOne">1</view>
        <view v-show="themes.config.linearGradientStatus" @click.stop="open(['custom','backgroundTwo'], 'two')" class="color-value margin-left-sm border-solid-xs text-center" :style="'background:'+themes.custom.backgroundTwo">2</view>
        <view v-show="themes.config.linearGradientStatus" @click.stop class="color-value border-solid-xs linearGradient" :class="{'margin-left-sm':themes.config.linearGradientStatus}" :style="'background:'+themes.custom.background"></view>
        <view v-show="!themes.config.linearGradientStatus" class="color-value border-solid-xs" :style="'background:'+themes.custom.background"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center">
        <view class="basis-sm">导航栏背景图片</view>
        <image class="custom-bgImage bg-white border-solid-xs" :src="themes.custom.backgroundImage"></image>
      </view>
      <view class="padding-xs icon-biaoshi font-size-df margin-bottom-sm">底部tab</view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['bar','color'])">
        <view class="basis-sm">tab未选中字体颜色</view>
        <view class="color-value border-solid-xs" :style="'background-color:'+themes.bar.color"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['bar','checked'])">
        <view class="basis-sm">tab选中字体颜色</view>
        <view class="color-value border-solid-xs" :style="'background-color:'+themes.bar.checked"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['bar','background'])">
        <view class="basis-sm">
          <label class="margin-right-sm">tab背景颜色</label>
          <radio-group @click.stop @change="themeSelect = ['bar', 'background']" class="margin-top-df" v-show="themes.config.linearGradientStatus" style="display: unset">
            <radio :value="themes.bar.mode" :checked="(themeSelect[0]?themeSelect[0]:'custom')==='bar'" />
          </radio-group>
        </view>
        <view v-show="themes.config.linearGradientStatus" @click.stop="open(['bar','backgroundOne'], 'one')" class="color-value border-solid-xs text-center" :style="'background:'+themes.bar.backgroundOne">1</view>
        <view v-show="themes.config.linearGradientStatus" @click.stop="open(['bar','backgroundTwo'], 'two')" class="color-value margin-left-sm border-solid-xs text-center" :style="'background:'+themes.bar.backgroundTwo">2</view>
        <view v-show="themes.config.linearGradientStatus" @click.stop class="color-value border-solid-xs linearGradient" :class="{'margin-left-sm':themes.config.linearGradientStatus}" :style="'background:'+themes.bar.background"></view>
        <view v-show="!themes.config.linearGradientStatus" class="color-value border-solid-xs" :style="'background:'+themes.bar.background"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center">
        <view class="basis-sm">bar背景图片</view>
        <image class="custom-bgImage bg-white border-solid-xs" :src="themes.bar.backgroundImage"></image>
      </view>
      <view class="padding-xs icon-biaoshi font-size-df margin-bottom-sm">背景</view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center" @click="open(['background','background'])">
        <view class="basis-sm">
          <label class="margin-right-sm">背景颜色</label>
          <radio-group @click.stop @change="themeSelect = ['background', 'background']" class="margin-top-df" v-show="themes.config.linearGradientStatus" style="display: unset">
                <radio :value="themes.background.mode" :checked="(themeSelect[0]?themeSelect[0]:'custom')==='background'" />
          </radio-group>
        </view>
        <view v-show="themes.config.linearGradientStatus" @click.stop="open(['background', 'backgroundOne'], 'one')" class="color-value border-solid-xs text-center" :style="'background:'+themes.background.backgroundOne">1</view>
        <view v-show="themes.config.linearGradientStatus" @click.stop="open(['background', 'backgroundTwo'], 'two')" class="color-value margin-left-sm border-solid-xs text-center" :style="'background:'+themes.background.backgroundTwo">2</view>
        <view v-show="themes.config.linearGradientStatus" @click.stop class="color-value border-solid-xs linearGradient" :class="{'margin-left-sm':themes.config.linearGradientStatus}" :style="'background:'+themes.background.background"></view>
        <view v-show="!themes.config.linearGradientStatus" class="color-value border-solid-xs" :style="'background:'+themes.background.background"></view>
      </view>
      <view class="flex flex-column margin-bottom-sm padding-xs align-center">
        <view class="basis-sm">背景图片</view>
        <image class="custom-bgImage bg-white border-solid-xs" :src="themes.background.backgroundImage"></image>
      </view>
      <view class="padding-xs">
        <checkbox-group @change="themes.config.linearGradientStatus = !themes.config.linearGradientStatus">
          <label>背景渐变色：
            <checkbox value="linearGradientStatus" :checked="themes.config.linearGradientStatus" />
          </label>
        </checkbox-group>
        <radio-group @change="modeChange" class="flex flex-column margin-top-df" v-show="themes.config.linearGradientStatus">
          <label class="" v-for="(item, index) in model" :key="index">
            <view class="basis-sm margin-right-df">
              <radio :value="item.value" :checked="item.value === (themes[themeSelect[0]]?themes[themeSelect[0]]['mode']:themes['custom']['mode'])" />
              <label>{{item.name}}</label>
            </view>
          </label>
        </radio-group>
      </view>
      <view class="margin-top-df">
        <button class="" size="mini" type="primary" @click="saveThemes">保存</button>
        <button class="margin-left-df" size="mini" type="primary" @click="defaultThemes">恢复默认</button>
      </view>
    </view>
    <wit-tabBar></wit-tabBar>
  </wit-content>
</template>
<script setup lang="ts">
import { themeStore } from '@/store/pinia/modules/theme'

const useTheme = themeStore();
const { defaultTheme, storeColor, setStoreColor } = useTheme;

const model = [ // 渐变方向
  {
    name: '从上到下',
    value: 'to bottom'
  },
  {
    name: '从左到右',
    value: 'to right'
  },
  {
    name: '左上角到右下角',
    value: 'to bottom right'
  }
]
let themes = reactive(storeColor);
let themeSelect = ref('');
const linearGradient =ref({
  one: 'rgba(255,255,255,1)',
  two: 'rgba(0,0,0,1)',
  mode: 'to right'
})
const selectLG =ref();
const color = ref({
  r: 0,
  g: 0,
  b: 0,
  a: 1
})
const openColorPicker = ref()

onLoad(() => {
  // themes.value = storeColor;
  openColorPicker.value = getCurrentInstance()
})

/***
 * 打开调色板
 * @param item Array
 * @param status string
 */
const open = (item, status) => {
  color.value = getRGBA(themes[item[0]][item[1]])
  themeSelect.value = item
  // console.log(this.themes[item[0]][item[1]])

  console.log(color)
  selectLG.value = status
  openColorPicker.value.refs.colorPicker.open()
}

/***
 * 选择获取的颜色
 * @param e
 */
const confirm = (e) => {
  const status = ref(selectLG.value)
  console.log(themeSelect.value)
  console.log(e, status.value)
  const rgba = `rgba(${e.rgba.r}, ${e.rgba.g}, ${e.rgba.b}, ${e.rgba.a})`
  if (status.value){
    if (status.value === 'one')
      themes[themeSelect.value[0]][themeSelect.value[1]] = rgba
    else if (status.value === 'two')
      themes[themeSelect.value[0]][themeSelect.value[1]] = rgba
    themes[themeSelect.value[0]]['background'] =  `linear-gradient(${themes[themeSelect.value[0]]['mode']}, ${themes[themeSelect.value[0]]['backgroundOne']}, ${themes[themeSelect.value[0]]['backgroundTwo']})`
  }else
    themes[themeSelect.value[0]][themeSelect.value[1]] = rgba
  if(themeSelect.value[1] === 'background')
    themes[themeSelect.value[0]]['backgroundOne'] = rgba
}
/**
 * 提取 rgba值
 * @param str String
 */
const getRGBA = (str) => {
  console.log(str)
  const match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);
  let arr = [match[1], match[2], match[3]];
  if (match[4]) {
    arr.push(match[4]);
  } else {
    arr.push(1)
  }
  arr = arr.map(Number)
  let rgba = {
    r: arr[0],
    g: arr[1],
    b: arr[2],
    a: arr[3]
  }
  return rgba;
}
/**
 * 保存主题配置
 */
const saveThemes = () => {
  setStoreColor(themes)
}
/***
 * 恢复默认配置
 */
const defaultThemes = () => {
  setStoreColor(defaultTheme)
  themes.config = defaultTheme.config;
  themes.bar = defaultTheme.bar
  themes.background = defaultTheme.background
  themes.button = defaultTheme.button
  themes.custom = defaultTheme.custom
}
// watchEffect(() => {
//   defaultThemes()
// })
/***
 * 选择渐变方向
 * @param e
 */
const modeChange = (e) => {
  if (themeSelect.value.length) {
    themes[themeSelect.value[0]]['background'] = themes[themeSelect.value[0]]['background'].replace(themes[themeSelect.value[0]]['mode'], e.detail.value)
    themes[themeSelect.value[0]]['mode'] = e.detail.value
  } else {
    themes['custom'].background = themes['custom'].background.replace(themes['custom'].mode, e.detail.value)
    themes['custom'].mode = e.detail.value
  }
}
</script>

<style scoped>
.color-value {
  width: 30rpx;
  height: 30rpx;
}
.custom-bgImage{
  height: 50rpx;
  width: 220rpx;
}
.linearGradient {
  height: 30rpx;
  width: 136rpx;
}
</style>
